export default function({ Button }) {
	const param = {};
	if (env === 'react-antd') {
		param.title = '自定义表单验证';
	} else {
		param.header = '自定义表单验证';
	}
	// 定义校验数字的规则方法
	const checkNumber = async (value, label) => {
		try {
			// 验证成功，则返回空内容，不触发错误
			if (!isNaN(Number(value))) return;
		} catch (e) {};
		// 有返回内容，则会触发错误
		return label + ' 请输入数字';
	};
	// 全局注入校验规则
	ruleConfig.ruleData.checkNumber = checkNumber;
	const area = this.area(param);
	// 每一次的add会构建一个单独
	area.add(
		$Input({
			$name: 'field',
			$label: '表单域',
			placeholder: '本表单会验证必填和数字',
			// 使用全局注入校验规则checkNumber
			// $rules: ['required', 'checkNumber'],
			// 使用自定义校验规则checkNumber
			$rules: ['required', checkNumber],
			// style: { width: 'auto' },
			// antd的formItem中，只能放入一个元素，否则表单无法取值
			// $formItemChilds: []
		}),
		(() => {
			const param = {
				type: 'primary',
				$hasFormItem: true,
				onClick: async () => {
					const values = await action.validateFields();
					console.log(values);
				}
			};
			if (env !== 'react-antd') {
				// antd中不设置$label，默认不带labelWidth
				param.$formItemParam = { labelWidth: '0px' }
			}
			return area.render(Button, param, '验证并获取数据');
		})()
	);
	// 元素添加完毕，确定渲染
	const action = area.done();
}